<template>
  <div class="container">
    <div class="header">BarChartPictorialCylinder</div>
    <div class="echart-container">
      <div ref="echartsBox" class="echarts-box"></div>
    </div>
  </div>
</template>

<script setup>
  import { ref, getCurrentInstance } from 'vue';
  import commomOption from './commomOption.ts';
  import * as echarts from 'echarts';
  const barWidth = 16;
  const symbolOffsetLeft = [-(barWidth / 2 + 4), -4];
  const symbolOffsetLeftBottom = [-(barWidth / 2 + 4), 5];
  const symbolOffsetRight = [barWidth / 2 + 5, -4];
  const symbolOffsetRightBottom = [barWidth / 2 + 4, 5];
  let yData = [300, 498, 778, 382, 299, 372, 599];
  let yData2 = [200, 418, 578, 682, 599, 72, 382];
  const maxData = Math.max(...yData) + 200;

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
      formatter: function (params) {
        console.log(params);
        let str = ' ';
        str = `<div>${params[2].marker + params[2].seriesName}：${params[2].value}</div>
              <div>${params[6].marker + params[6].seriesName}：${params[6].value}</div>
        `;
        return str;
      },
    },
    legend: {
      top: 5,
      data: ['柱状图名字A', '柱状图名字B'],
      selectedMode: false,
      textStyle: {
        color: '#fff',
      },
    },
    grid: commomOption.grid,
    xAxis: Object.assign({}, commomOption.xAxis, {
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
    }),
    yAxis: Object.assign({}, commomOption.yAxis, {
      axisLabel: {
        color: 'rgb(255, 255, 255)',
        formatter: '{value}', //y轴数值
      },
    }),
    series: [
      // 最顶部圆片
      {
        name: '最顶部圆片',
        type: 'pictorialBar',
        symbolSize: [barWidth, 10],
        symbolOffset: symbolOffsetLeft,
        z: 3,
        symbolPosition: 'end',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            // 这里 offset: 0 1 ,表示从下往上的渐变色
            {
              offset: 0, // 0%处的颜色
              color: 'rgba(111,111,111,0.4)',
            },

            {
              offset: 1, // 100%处的颜色
              color: 'rgba(0,229,255,0.8)',
            },
          ]),
        },
        // 设置最大数据，可以不设置data，默认为真实数据的最大值
        data: [maxData, maxData, maxData, maxData, maxData, maxData, maxData],
      },
      // 柱状图顶部的圆片:pictorialBar
      {
        name: '柱状图顶部的圆片',
        type: 'pictorialBar',
        symbolSize: [barWidth, 8],
        symbolOffset: symbolOffsetLeft,
        z: 12,
        symbolPosition: 'end',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            // 这里 offset: 0 1 ,表示从下往上的渐变色
            {
              offset: 0, // 0%处的颜色
              color: 'rgba(0,111,111,1.4)',
            },

            {
              offset: 1, // 100%处的颜色
              color: 'rgba(0,229,255,1)',
            },
          ]),
        },
        data: yData,
      },
      // 柱状图:bar，同时设置背景颜色和样式
      {
        name: '柱状图名字A',
        type: 'bar', // 柱状图
        barWidth: barWidth, // 柱条的宽度,不设时自适应
        barGap: '10', // 柱子与柱子之间的距离
        showBackground: true,
        label: {
          // 图形上的文本标签,可用于说明图像的一些数据信息,比如值,名称等
          show: true, //是否显示标签
          position: 'top', // 标签的位置(可以是绝对的像素值或者百分比['50%','50%',也可以是top,left等])
          color: '#01E4FF',
          fontSize: 12,
          rotate: -40,
        },
        backgroundStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            // 这里 offset: 0 1 ,表示从下往上的渐变色
            {
              offset: 0, // 0%处的颜色
              color: 'rgba(111,111,111,0.1)',
            },
            {
              offset: 1, // 0%处的颜色
              color: 'rgba(11,111,111,0.2)',
            },
          ]),
        },
        itemStyle: {
          // 图形样式
          // color支持(rgb(255,255,255)、rgba(255,255,255,1)、#fff,也支持渐变色和纹理填充)
          // 下面就是使用线性渐变
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            // 这里 offset: 0 1 ,表示从下往上的渐变色
            {
              offset: 0, // 0%处的颜色
              color: 'rgba(1,0,0,1)',
            },
            {
              offset: 0.4, // 2%处的颜色
              color: 'rgba(11,111,111,0.8)',
            },
            {
              offset: 1, // 100%处的颜色
              color: 'rgba(0,229,255,1)',
            },
          ]),
        },
        data: yData,
      },
      //最底部圆片
      {
        name: '最底部圆片',
        type: 'pictorialBar', // pictorialBar(象形柱图)
        symbolSize: [barWidth, 8], // 图形的大小用数组分别比表示宽和高,也乐意设置成10相当于[10,10]
        symbolOffset: symbolOffsetLeftBottom, // 图形相对于原本位置的偏移
        z: 12, // 象形柱状图组件的所有图形的 z 值.控制图形的前后顺序.z 值小的图形会被 z 值大的图形覆盖.
        itemStyle: {
          // 图形样式
          // echarts.graphic.LinearGradient(echarts内置的渐变色生成器)
          // 4个参数用于配置渐变色的起止位置,这4个参数依次对应右 下 左 上
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            // 这里 offset: 0 1 ,表示从下往上的渐变色
            {
              offset: 0, // 0%处的颜色
              color: 'rgba(111,111,111,0.4)',
            },

            {
              offset: 1, // 100%处的颜色
              color: 'rgba(0,229,255,1)',
            },
          ]),
        },
        data: yData,
      },

      // rgb(0,64,124) 0%, rgb(81,175,255)
      // 最顶部圆片
      {
        name: '最顶部圆片',
        type: 'pictorialBar',
        symbolSize: [barWidth, 10],
        symbolOffset: symbolOffsetRight,
        z: 3,
        symbolPosition: 'end',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            // 这里 offset: 0 1 ,表示从下往上的渐变色
            {
              offset: 0, // 0%处的颜色
              color: 'rgba(0,64,124,1)',
            },

            {
              offset: 1, // 100%处的颜色
              color: 'rgba(81,175,255,1)',
            },
          ]),
        },
        // 设置最大数据，可以不设置data，默认为真实数据的最大值
        data: [maxData, maxData, maxData, maxData, maxData, maxData, maxData],
      },
      // 柱状图顶部的圆片:pictorialBar
      {
        name: '柱状图顶部的圆片',
        type: 'pictorialBar',
        symbolSize: [barWidth, 8],
        symbolOffset: symbolOffsetRight,
        z: 12,
        symbolPosition: 'end',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            // 这里 offset: 0 1 ,表示从下往上的渐变色
            {
              offset: 0, // 0%处的颜色
              color: 'rgba(0,64,124,1)',
            },

            {
              offset: 1, // 100%处的颜色
              color: 'rgba(0,229,255,1)',
            },
          ]),
        },
        data: yData2,
      },
      // 柱状图:bar，同时设置背景颜色和样式
      {
        name: '柱状图名字B',
        type: 'bar', // 柱状图
        barWidth: barWidth, // 柱条的宽度,不设时自适应
        barGap: '50%', // 柱子与柱子之间的距离
        showBackground: true,
        label: {
          // 图形上的文本标签,可用于说明图像的一些数据信息,比如值,名称等
          show: true, //是否显示标签
          position: 'top', // 标签的位置(可以是绝对的像素值或者百分比['50%','50%',也可以是top,left等])
          color: '#01E4FF',
          fontSize: 12,
          rotate: -40,
        },
        backgroundStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            // 这里 offset: 0 1 ,表示从下往上的渐变色
            {
              offset: 0, // 0%处的颜色
              color: 'rgba(0,64,124,.2)',
            },

            {
              offset: 1, // 100%处的颜色
              color: 'rgba(81,175,255,.1)',
            },
          ]),
        },
        itemStyle: {
          // 图形样式
          // color支持(rgb(255,255,255)、rgba(255,255,255,1)、#fff,也支持渐变色和纹理填充)
          // 下面就是使用线性渐变
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            // 这里 offset: 0 1 ,表示从下往上的渐变色
            {
              offset: 0, // 0%处的颜色
              color: 'rgba(1,0,0,1)',
            },
            {
              offset: 0.3, // 2%处的颜色
              color: 'rgba(0,64,124,1)',
            },
            {
              offset: 1, // 100%处的颜色
              color: 'rgba(0,229,255,1)',
            },
          ]),
        },

        data: yData2,
      },
      //最底部圆片
      {
        name: '最底部圆片',
        type: 'pictorialBar', // pictorialBar(象形柱图)
        symbolSize: [barWidth, 8], // 图形的大小用数组分别比表示宽和高,也乐意设置成10相当于[10,10]
        symbolOffset: symbolOffsetRightBottom, // 图形相对于原本位置的偏移
        z: 12, // 象形柱状图组件的所有图形的 z 值.控制图形的前后顺序.z 值小的图形会被 z 值大的图形覆盖.
        itemStyle: {
          // 图形样式
          // echarts.graphic.LinearGradient(echarts内置的渐变色生成器)
          // 4个参数用于配置渐变色的起止位置,这4个参数依次对应右 下 左 上
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            // 这里 offset: 0 1 ,表示从下往上的渐变色
            {
              offset: 0, // 0%处的颜色
              color: 'rgba(0,111,111,.2)',
            },

            {
              offset: 1, // 100%处的颜色
              color: 'rgba(0,229,255,1)',
            },
          ]),
        },
        data: yData2,
      },
    ],
  };

  function createLinearGradient(colorStart, colorEnd) {
    if (!colorEnd) {
      colorEnd = convertToRGBA(colorStart, 0.1);
    }
    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: colorStart },
      { offset: 1, color: colorEnd },
    ]);
  }
  function createRadialGradient(colorStart, colorEnd) {
    if (!colorEnd) {
      colorEnd = convertToRGBA(colorStart, 0.1);
    }
    return new echarts.graphic.RadialGradient(
      0.5,
      0.5,
      0.65, // x, y, radius
      [
        { offset: 0, color: colorStart },
        { offset: 1, color: colorEnd },
      ],
    );
  }
  // 转换颜色值为 rgba 字符串
  function convertToRGBA(color, opacity) {
    var hexRegExp = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
    var result = hexRegExp.exec(color);
    var r = parseInt(result[1], 16);
    var g = parseInt(result[2], 16);
    var b = parseInt(result[3], 16);
    return 'rgba(' + r + ',' + g + ',' + b + ',' + opacity + ')';
  }

  const { proxy } = getCurrentInstance();
  const echartsBox = ref();
  function echartInit() {
    nextTick(() => {
      let myChart = proxy.$echarts.init(echartsBox.value);

      option && myChart.setOption(option);
      window.addEventListener('resize', function () {
        myChart.resize();
      });
    });
  }
  echartInit();
</script>
<style lang="less" scoped>
  @import url(./container.less);
</style>
